<template>
  <div>
    <table id="table1" ref="table">
      <thead>
        <tr>
          <td>序号</td>
          <td>姓名</td>
          <td>年龄</td>
          <td>兴趣</td>
          <td>就业率</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in list">
          <td>{{ item.id }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.age }}</td>
          <td>{{ item.hobby }}</td>
          <td>{{ item.jobRate }}</td>
        </tr>
      </tbody>
    </table>
    <div>
      <button @click="exportToFile1">导出</button>
      <button @click="exportToFile2">导出</button>
    </div>
  </div>
</template>

<script>
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'
  export default {
    data() {
      return {
        list: [{
            id: 1,
            name: 'jack',
            age: 8,
            hobby: 'basketball',
            jobRate: '52.0%'
          },
          {
            id: 1,
            name: 'willan',
            age: 8,
            hobby: 'basketball',
            jobRate: '44.0%'
          },
          {
            id: 1,
            name: 'jack',
            age: 8,
            hobby: 'basketball',
            jobRate: '81.0%'
          },
          {
            id: 1,
            name: 'jack',
            age: 8,
            hobby: 'basketball',
            jobRate: '55.0%'
          }
        ]
      }
    },
    methods: {
      exportToFile1() {
        let table = document.querySelector('#table1')
        let sheet = XLSX.utils.table_to_book(table)
        console.log('fds', sheet.SheetNames)
        let worksheet = sheet.Sheets[sheet.SheetNames[0]]
        for(let i in worksheet) {
          if(i.indexOf('E') > -1 && !isNaN(worksheet[i].v)) {
            worksheet[i].v = (worksheet[i].v *100).toFixed(1) + '%'
            console.log('fds', worksheet[i])
          }
        }
        console.log('fds', worksheet)
        const wbout = XLSX.write(sheet, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        try {
          FileSaver.saveAs(new Blob([wbout], {
            type: 'application/octet-stream'
          }), '成绩.xlsx')
        } catch (e) {
          if (typeof console !== 'undefined') {
            console.log(e, wbout)
          }
        }
      },
      exportToFile2() {
        //json 数据
        var data = [{
          "a": 1,
          "x": 2,
          "b": 3,
          "y": 4,
          "success": true
        }, {
          "a": 1,
          "x": 2,
          "b": 3,
          "y": 4,
          "success": false
        },{
          "a": '10%',
          "x": '20%',
          "b": '30%',
          "y": '40%',
          "success": false
        }];
        //数据表格
        var table = [];
        table.push({
          A: "列A",
          B: "列B",
          C: "列C",
          D: "列D",
          E: "列E"
        });
        data.forEach(function(item) {
          var row = {
            A: item.b,
            B: item.y,
            C: item.a,
            D: item.x,
            E: (item.success ? '成功' : '失败')
          };
          table.push(row);
        });
        //创建book
        var wb = XLSX.utils.book_new();
        //json转sheet
        var ws = XLSX.utils.json_to_sheet(table, {
          header: ["A", "B", "C", "D", "E"],
          skipHeader: true
        });
        //设置列宽
        ws['!cols'] = [{
            width: 15
          },
          {
            width: 15
          },
          {
            width: 15
          },
          {
            width: 15
          },
          {
            width: 10
          }
        ];
        var timestamp = (new Date()).getTime();
        //sheet写入book
        XLSX.utils.book_append_sheet(wb, ws, "file");
        //输出
        //XLSX.writeFile(wb, "file" + timestamp + ".xlsx");
        const wbout = XLSX.write(wb, {
          bookType: 'xlsx',
          bookSST: true,
          type: 'array'
        })
        try {
          FileSaver.saveAs(new Blob([wbout], {
            type: 'application/octet-stream'
          }), `成绩${timestamp}.xlsx`)
        } catch (e) {
          if (typeof console !== 'undefined') {
            console.log(e, wbout)
          }
        }
      }
    }
  }
</script>

<style>
</style>
